<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" right-icon="home" left-text="返回" @clickRight="backWork"
			:title=this.titleName  @clickLeft="back" />

		<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="70" align="center">季度</uni-th>
					<uni-th width="50" align="center">净售量</uni-th>
					<!-- <uni-th width="30" align="center">赠品量</uni-th> -->
					<uni-th width="70" align="center">净售额</uni-th>
					<uni-th width="70" align="center">净成本</uni-th>
					<uni-th width="70" align="center">商品利润</uni-th>
					<uni-th width="100" align="center">操作</uni-th>
				</uni-tr>
			
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td align="center">{{ item.quanter }}</uni-td>
				<uni-td align="center">{{ item.netSalesVolume }}</uni-td>
				<!-- <uni-td align="center">{{ item.giftQuantity }}</uni-td> -->
				<uni-td align="center">{{ item.netSalesAmount }}</uni-td>
				<uni-td align="center">{{ item.netCost }}</uni-td>
				<uni-td align="center">{{item.profit}}</uni-td>
				<uni-td align="center">
					<view class="uni-group">
						<button size="mini" type="primary" style="height: 25px;width: 50px;background-color: rgb(0, 122, 255)" @click="details(item.quanterId,item.quanter)" icon='shop'>
							<text style="font-size: 12px; position: absolute; left: 12px;top: -1px;">品牌</text>
						</button>
						<button size="mini" type="primary" style="height: 25px;width: 50px;background-color: palevioletred" @click="categoryDetails(item.quanterId,item.quanter)" icon='shop'>
							<text style="font-size: 12px; position: absolute; left: 12px;top: -1px;">类别</text>
						</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>



	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	export default {
		data() {
			return {
				loading: false,
				boxHeight: 0, // box盒子的高度
				year: '',
				yearId: '',
				titleYear: '',
				titleName: '',
				chainStore: '',
				handledBy: '',
				startTime: '',
				endTime: '',
				authority: null,
				loginUserId: null,
				loginUserType: null,
				chainStoreName: '',
				tableData: []
			}
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log("========品牌页面=====")
			console.log("年份："+option.yearId); //打印出上个页面传递的参数。
			this.year = option.yearId
			this.titleYear = option.year
			this.chainStoreName = option.chainStoreName
			console.log(option.chainStoreName)
			console.log("店铺："+option.chainStore); //打印出上个页面传递的参数。
			this.chainStore = option.chainStore
			console.log("经手人："+option.handledBy) //经手人信息
			this.handledBy = option.handledBy
			console.log("开始时间："+option.startTime)
			this.startTime = option.startTime
			console.log("结束时间："+option.endTime)
			this.endTime = option.endTime
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					// console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
		},
		mounted() {
			this.getInfo(),
			this.getBoxHeight(),
			this.initTitleName()
		},
		methods: {
			//初始化页面标题
			initTitleName(){
				if(this.chainStore === ""){
					this.titleName = this.titleYear
				}else{	
					this.titleName = this.chainStoreName.substring(0,6) + this.titleYear 
				}
			},
			
		

			//获取盒子高度
			getBoxHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.table-header')
					.boundingClientRect(rect => {
						if (rect) {
							this.boxHeight = rect.height;
						}
					})
					.exec();
			},

			// 左上角返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			backWork(){
				uni.switchTab({
					url: '/pages/work/work'
					})
			},
			// 获取信息
			getInfo() {
				uni.showLoading({
						title: "加载中...."
					}),
				uni.request({
					url: baseUrl+'/sales/quanter',
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					data: {
						userId: this.loginUserId,
						userType: this.loginUserType,
						chainStore: this.chainStore,
						handledBy: this.handledBy,
						year: this.year,
						startTime: this.startTime,
						endTime: this.endTime
					},
					success: (res) => {
						console.log("进去getinfo")
						console.log(res.data)
						if (res.data.data != null) {
							setTimeout(function() {
									uni.hideLoading();
								}, 200)
								console.log(this.authority)
								if(this.authority == 2){
									console.log("拿到权限2")
									for (var i = 0; i < res.data.data.length; i++) {
										res.data.data[i].netCost = '0.00'
										res.data.data[i].profit = '0.00'
									}									
									this.tableData = res.data.data
								}else{
									this.tableData = res.data.data
								}
							
						} else {

						}
					}
				})
			},
			// 进入品牌详情
			details(quanterId,quanter) {
				console.log(this.chainStoreName)
				console.log(quanter)
				console.log(this.year)
				console.log(quanterId)
				let chainStore = this.chainStore;
				console.log(chainStore)
				let handledBy = this.handledBy;
				console.log(handledBy)
				let startTime = this.startTime
				console.log("======开始时间：" + startTime)
				let endTime = this.endTime
				console.log("======结束时间：" + endTime)
				uni.navigateTo({
					url: '/pages/form/quanterSales/brandStatisitcs/brandStatisitcs?year=' + this.year+ 
					'&titleYear=' + this.titleYear + 
					'&titleQuanter=' + quanter + 
					'&quanter='+quanterId + 
					'&chainStore=' + chainStore + 
					'&handledBy=' + handledBy + 
					'&startTime=' + startTime +
					'&endTime='+endTime + 
					'&chainStoreName=' + this.chainStoreName
				})
			},
			// 进入类别详情
			categoryDetails(quanterId,quanter){
				console.log(this.yearId)
				console.log(quanterId)
				let chainStore = this.chainStore;
				console.log(chainStore)
				let handledBy = this.handledBy;
				console.log(handledBy)
				let startTime = this.startTime
				console.log("======开始时间：" + startTime)
				let endTime = this.endTime
				console.log("======结束时间：" + endTime)
				uni.navigateTo({
					url: '/pages/form/quanterSales/category/category?year=' + this.year + 
					'&titleYear=' + this.titleYear + 
					'&titleQuanter=' + quanter + 
					'&quanter='+quanterId + 
					'&chainStore=' +chainStore + 
					'&handledBy=' + handledBy + 
					'&startTime=' + startTime +
					'&endTime='+endTime +
					'&chainStoreName=' + this.chainStoreName
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content {
			width: 100%;
			height: 100vh;
		}

	.table-header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 99999;
		background-color: #fff;
	}

	//冻结表头第一列
	/deep/ .uni-table-tr .uni-table-td:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: lavenderblush;
		z-index: 9999;
	}

	/deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	}

	/deep/ .uni-table-tr .uni-table-th:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 9999;
	}
</style>